Learning Topic 4: Building a Traditional Website: Containers, Content, Cascading Style Sheets (CSS), and Color , Cascading Style Sheets (CSS), and Color Background/Rationale This Learning Topic is all about getting content on the Internet and best-practice methods of message delivery. There is more than one way to create a web presence. You will learn about the different website creation tools and when to use each. With today's tools, it is no longer necessary to learn coding to produce a great looking site; there are several user-friendly options to bring information to a website visitor. Understanding basic HTML and XHTML behind the WYSIWYG programs—both computer and web based—and understanding the philosophy behind design choices for both text and color, are foundational understandings behind strong website communication. Exploration of various methods and tools will help you understand when a particular design approach is appropriate. 1. Website creation software Professional and higher end "amateur" sites can be created by an application called Dreamweaver. This is a WYSIWYG (What You See Is What You Get) program that allows very advanced code insertion as well as design programming. If you want to pursue web design in a serious way or teach at a high school web development level, this is the best program to use. KompoZer (http://www.kompozer.net/ ) is an open source (free) tool that is very similar to Dreamweaver and also installs to your hard drive. iWeb, from Apple, is an easier web production program that installs to the desktop and offers beautifully designed sites. 2. Another type of website creation - webware There are also "webware" (software that works through your browser window with much of the functionality of a desktop-installed software) web creation programs like Weebly, Webs, Google Sites and several others that are easier to manage and give great results. These offer a bit less functionality and choice options but serve well for basic websites and allow the focus to be on content rather than production. 3. Content vs. Programming An important question to ask when directing a student web assignment is whether your goal is website production (technical website skills) or presentation of learning on a website. For instance, don't let a project become bogged down with learning web coding skills if your focus is presenting knowledge of World War II. 4. Content management website products There are also website "content management" products, such as SchoolCenter, sold to school districts and educational clients. These allow nearly everyone to create a basic web presence, help manage documents, and create a consistent professional look for a school district. While such sites make educational content management relatively easy for the layperson, they do have drawbacks. For example, embedding an Adobe Flash video into a page on such a tool can be difficult. After some use, these sites may feel restrictive, but they may be your only choice in a school district. Having your own site hosted independently or on a district server for classroom use may be a great benefit to your teaching. 5. Course management website products Finally, course management systems like Blackboard are yet another web presence. These are very prescribed website containers developed primarily for online coursework. They offer a variety of extra functions like quizzes, attendance, or discussion boards. These course management systems will be covered in more depth in the advanced web development course. The actual pages on course management products are created with the same basic HTML used for all other web program areas. Tweaking the code on any of these programs is a way to add a bit more interactivity and personalization, so knowing a bit of HTML (hypertext markup language), the basic code behind website programming, is a good thing. 6. Basic programming: Typography, color, and CSS Clean uses of text, style sheets and cascading style sheets (CSS), and color choices lay a strong base for beginning website design. Each of these elements will be explored and applied to a classroom website that you will begin in this Learning Topic and work on over the next three Learning Topics. In addition to the layout covered in the previous Learning Topics, typography and color scheme are critical elements to plan for in the creation of a web presence that is communicated well to a specific audience. Learner Outcomes: At the end of this Learning Topic, you will be able to: · Compare the different website creation options available, and identify when each might be used. (Discussion 1) · Understand basic HTML and XHTML coding that supports the website back-end. (Project 1) · Use basic HTML and XHTML coding to create a simple web page. · Explore the theory of typography for screen reading and overall site design. (Project 2) · Understand topography related to the use of Cascading Style Sheets (CSS) to achieve strong communication within the website constraints. (Project 2) · Apply the knowledge of typography and CSS to evaluate websites. · Develop a personal philosophy for color uses based on site purpose and audience, and gain resources for making these decisions. (Discussion 2) · Demonstrate understanding of course content by creating a final project website for your classroom (right tool, navigation, layout and design, typography, and color). Readings and Research: Read all of the following: A. Website design philosophies First Impressions Count in Website Design - visual appeal, beauty and aesthetics, halo effect, cognitive perception, webpage judgments of credibility. (2006, January 17). Website Optimization: Speed Up Your Site website optimization web speed optimize website performance company. Retrieved November 5, 2009, from http://www.websiteoptimization.com/speed/tweak/blink/ Fadeyev, D. (2009, April 6). Design To Sell: 8 Useful Tips To Help Your Website Convert - Smashing Magazine. Smashing Magazine. Retrieved November 5, 2009, from http://www.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/ Smith, M. (2009, October 25). 20 Do’s and Don’ts of Effective Web Design | Web Design Ledger. Web Design Ledger | A Publication for Web Designers. Retrieved November 11, 2009, from http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design B. Typography resources Boardley, J. (2007, September 19). 15 Excellent Examples of Web Typography. Part 1 | i love typography, the typography and fonts blog. fonts, typefaces and all things typographical — I love Typography (ILT). Retrieved November 9, 2009, from http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/ Gourgouri, V. (2008, July 10). Websites with Excellent CSS Typography - CSSAddict. CSSAddict - Web Design Concepts. Retrieved November 9, 2009, from http://www.cssaddict.com/blog/websites-with-excellent-css-typography-design/ Johnson, R. (2008, June 2). 10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog. Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive. Retrieved November 9, 2009, from http://www.3point7designs.com/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/ Phillips, J. (2009, April 1). 20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios. Spyre Studios - Web-Design And Inspiration Blog. Retrieved November 9, 2009, from http://spyrestudios.com/20-examples-of-dark-minimalist-website-designs-with-great-typography/ Yehia, N. (2009, January 27). 50 Useful Design Tools For Beautiful Web Typography - Smashing Magazine. Smashing Magazine. Retrieved November 9, 2009, from http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/ CSS Tutorial. (n.d.). W3Schools Online Web Tutorials. Retrieved November 9, 2009, from http://www.w3schools.com/css/ C. Color scheme choices and color theory Garrison, C. (2009, October 1). 3 Ways To Find The Best Website Color Scheme. Master The Art Of Tableless Web Design - Five Finger Coding. Retrieved November 9, 2009, from http://www.fivefingercoding.com/web-design/how-to-find-the-best-website-color-scheme Kuler. (n.d.). Kuler. Retrieved November 11, 2009, from http://kuler.adobe.com Posadas, S. (2009, March 29). The Meaning of Colour in Web Design. Sibagraphics : Noosa Web Design and Graphics, Sunshine Coast. Retrieved November 11, 2009, from http://www.sibagraphics.com/colour.php ColorJack: Sphere (Color Theory Visualizer). (n.d.). Color Theory @ ColorJack. Retrieved November 9, 2009, from http://www.colorjack.com/sphere/ Color Combinations | Color Schemes | Color Palettes. (n.d.). Color Combinations | Color Schemes | Color Palettes. Retrieved November 11, 2009, from http://www.colorcombos.com/ ColorSchemer Gallery | Website-ready color schemes for ColorSchemer. ColorSchemer | Instant Color Schemes. Retrieved November 11, 2009, from http://www.colorschemer.com/schemes/ Learning Activities Activity 1: Discussion – HTML Elements Project 1- Basic Website Tool Exploration From your reading about website creation you should have a basic understanding of how HTML code works. This knowledge will help you understand how web creation software works. Step 1: Try out your skills by creating a small web page file. Work through the tutorials for HTML and XHTML from the following W3C – World Wide Web Consortium websites: o HTML brief tutorial - http://www.w3schools.com/html/DEFAULT.asp
o XHTML brief tutorial http://www.w3schools.com/Xhtml/xhtml_intro.asp Step 2: Create a very basic hand-coded HTML page using a text document that incorporates the following elements: · Colored background · Text styles – bold, italic, underline, and color · Link insertion · Image insertion · Overall page look The expectation is that all students will be proficient and produce a beginning hand-coded website that contains the following based on the W3C tutorial information: Assessment See the HTML Elements Checklist for evaluation criteria. Activity 2: Discussion 1 - Website Application Comparison Step 1: Explore both a desktop application, like Dreamweaver, and a webware site creator, like Google Sites. Step 2: Discuss the following with your colleagues. Respond to two or more of your colleagues’ postings. · How does knowing basic code and being able to insert or tweak code extend the designer’s control in a site? · Evaluate each tool type on the tool’s ability to allow users to make choices in text, color, layout, and design. · Support why you would recommend each tool for both ease of use and its ability to allow code tweaking – hand code insertion. · Recommend and support your reasoning for which tool you would recommend for 1) a primary school student website on insects and, 2) a high school computer science course. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated. Activity 3: Discussion – Website Elements Project 2 Using Color, Typography, and Cascading Style Sheets (CSS) Explore the philosophy behind website color choices, CSS, and typography in your reading and web sources. Apply your new knowledge by finding both low-quality examples and high-quality examples of color use, typography use, and CSS in different websites. Step 1: Create a graphic organizer with a group of your fellow students (or individually as directed by your facilitator) to compare color and typography between exemplary and nonexemplary websites. Award-winning websites can be found at the Webby site (http://www.webbyawards.com/
), and subpar websites can found at sites like http://www.webpagesthatsuck.com . Step 2: Choose most recent worst case and best case award winners and create a chart that compares the elements of color and typography, as well as general audience appeal and communication value, for the four best and four worst sites of your choice. Step 3: Post your chart to the Discussion Forum for this activity. Read and provide feedback to two or more of your colleagues or groups. Assessment Refer to the Website Elements Checklist for evaluation criteria. Activity 4: Discussion 2 – Design Philosophies Best and Worst Design Philosophies Post your Project 2 graphic organizer on the Discussion Forum for this activity. Discuss the most important concepts you found while comparing these sites. What takeaway understanding have you gained that will guide the development of your own future website creation? Read and provide feedback to two or more of your colleagues. Assessment Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated. Activity 5: Classroom Website Begin Final Project -(due Learning Topic 8)As a final project for this course, you will develop a classroom website that incorporates all elements discussed during this course. Begin this week by choosing a website creation tool. In addition to Dreamweaver, KompoZer, and iWeb, you also can choose a webware application such as: · Weebly - http://www.weebly.com/
Looking Ahead – Activity 5 will help you begin the design of your education-based website for the classroom due in Learning Topic 8. Choose one website format, desktop application, or webware application to use as you begin to build a final project classroom website using the concepts learned in this course, and build on the concepts you learn in each Learning Topic. Instructions and Checklist are included in the Course Resources folder. Future Learning Topics will discuss images and usability. These will also be incorporated into your classroom website. Assessment Refer to the Classroom Website Checklist for evaluation criteria.
Background/Rationale
This Learning Topic is all about getting content on the Internet and best-practice methods of message delivery. There is more than one way to create a web presence. You will learn about the different website creation tools and when to use each. With today's tools, it is no longer necessary to learn coding to produce a great looking site; there are several user-friendly options to bring information to a website visitor. Understanding basic HTML and XHTML behind the WYSIWYG programs—both computer and web based—and understanding the philosophy behind design choices for both text and color, are foundational understandings behind strong website communication. Exploration of various methods and tools will help you understand when a particular design approach is appropriate.
1. Website creation software
Professional and higher end "amateur" sites can be created by an application called Dreamweaver. This is a WYSIWYG (What You See Is What You Get) program that allows very advanced code insertion as well as design programming. If you want to pursue web design in a serious way or teach at a high school web development level, this is the best program to use.
KompoZer (http://www.kompozer.net/
) is an open source (free) tool that is very similar to Dreamweaver and also installs to your hard drive. iWeb, from Apple, is an easier web production program that installs to the desktop and offers beautifully designed sites.
2. Another type of website creation - webware
There are also "webware" (software that works through your browser window with much of the functionality of a desktop-installed software) web creation programs like Weebly, Webs, Google Sites and several others that are easier to manage and give great results. These offer a bit less functionality and choice options but serve well for basic websites and allow the focus to be on content rather than production.
3. Content vs. Programming
An important question to ask when directing a student web assignment is whether your goal is website production (technical website skills) or presentation of learning on a website. For instance, don't let a project become bogged down with learning web coding skills if your focus is presenting knowledge of World War II.
4. Content management website products
There are also website "content management" products, such as SchoolCenter, sold to school districts and educational clients. These allow nearly everyone to create a basic web presence, help manage documents, and create a consistent professional look for a school district. While such sites make educational content management relatively easy for the layperson, they do have drawbacks. For example, embedding an Adobe Flash video into a page on such a tool can be difficult. After some use, these sites may feel restrictive, but they may be your only choice in a school district. Having your own site hosted independently or on a district server for classroom use may be a great benefit to your teaching.
5. Course management website products
Finally, course management systems like Blackboard are yet another web presence. These are very prescribed website containers developed primarily for online coursework. They offer a variety of extra functions like quizzes, attendance, or discussion boards. These course management systems will be covered in more depth in the advanced web development course. The actual pages on course management products are created with the same basic HTML used for all other web program areas. Tweaking the code on any of these programs is a way to add a bit more interactivity and personalization, so knowing a bit of HTML (hypertext markup language), the basic code behind website programming, is a good thing.
6. Basic programming: Typography, color, and CSS
Clean uses of text, style sheets and cascading style sheets (CSS), and color choices lay a strong base for beginning website design. Each of these elements will be explored and applied to a classroom website that you will begin in this Learning Topic and work on over the next three Learning Topics. In addition to the layout covered in the previous Learning Topics, typography and color scheme are critical elements to plan for in the creation of a web presence that is communicated well to a specific audience.
Learner Outcomes:
At the end of this Learning Topic, you will be able to:
· Compare the different website creation options available, and identify when each might be used. (Discussion 1)
· Understand basic HTML and XHTML coding that supports the website back-end. (Project 1)
· Use basic HTML and XHTML coding to create a simple web page.
· Explore the theory of typography for screen reading and overall site design. (Project 2)
· Understand topography related to the use of Cascading Style Sheets (CSS) to achieve strong communication within the website constraints. (Project 2)
· Apply the knowledge of typography and CSS to evaluate websites.
· Develop a personal philosophy for color uses based on site purpose and audience, and gain resources for making these decisions. (Discussion 2)
· Demonstrate understanding of course content by creating a final project website for your classroom (right tool, navigation, layout and design, typography, and color).
Readings and Research:
Read all of the following:
A. Website design philosophies
First Impressions Count in Website Design - visual appeal, beauty and aesthetics, halo effect, cognitive perception, webpage judgments of credibility. (2006, January 17). Website Optimization: Speed Up Your Site website optimization web speed optimize website performance company. Retrieved November 5, 2009, from http://www.websiteoptimization.com/speed/tweak/blink/
Fadeyev, D. (2009, April 6). Design To Sell: 8 Useful Tips To Help Your Website Convert - Smashing Magazine. Smashing Magazine. Retrieved November 5, 2009, from http://www.smashingmagazine.com/2009/04/06/design-to-sell-12-tips-to-help-your-website-convert/
Smith, M. (2009, October 25). 20 Do’s and Don’ts of Effective Web Design | Web Design Ledger. Web Design Ledger | A Publication for Web Designers. Retrieved November 11, 2009, from http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-design
B. Typography resources
Boardley, J. (2007, September 19). 15 Excellent Examples of Web Typography. Part 1 | i love typography, the typography and fonts blog. fonts, typefaces and all things typographical — I love Typography (ILT). Retrieved November 9, 2009, from http://ilovetypography.com/2007/09/19/15-excellent-examples-of-web-typography/
Gourgouri, V. (2008, July 10). Websites with Excellent CSS Typography - CSSAddict. CSSAddict - Web Design Concepts. Retrieved November 9, 2009, from http://www.cssaddict.com/blog/websites-with-excellent-css-typography-design/
Johnson, R. (2008, June 2). 10 Examples of Beautiful CSS Typography and how they did it… » - Web Design Marketing Podcast & Blog. Ann Arbor Web Design and Ann Arbor Graphic Design, by 3.7 Designs Interactive. Retrieved November 9, 2009, from http://www.3point7designs.com/blog/2008/06/10-examples-of-beautiful-css-typography-and-how-they-did-it/
Phillips, J. (2009, April 1). 20 Examples Of Dark & Minimalist Website Designs With Great Typography | Spyre Studios. Spyre Studios - Web-Design And Inspiration Blog. Retrieved November 9, 2009, from http://spyrestudios.com/20-examples-of-dark-minimalist-website-designs-with-great-typography/
Yehia, N. (2009, January 27). 50 Useful Design Tools For Beautiful Web Typography - Smashing Magazine. Smashing Magazine. Retrieved November 9, 2009, from http://www.smashingmagazine.com/2009/01/27/css-typographic-tools-and-techniques/
CSS Tutorial. (n.d.). W3Schools Online Web Tutorials. Retrieved November 9, 2009, from http://www.w3schools.com/css/
C. Color scheme choices and color theory
Garrison, C. (2009, October 1). 3 Ways To Find The Best Website Color Scheme. Master The Art Of Tableless Web Design - Five Finger Coding. Retrieved November 9, 2009, from http://www.fivefingercoding.com/web-design/how-to-find-the-best-website-color-scheme
Kuler. (n.d.). Kuler. Retrieved November 11, 2009, from http://kuler.adobe.com
Posadas, S. (2009, March 29). The Meaning of Colour in Web Design. Sibagraphics : Noosa Web Design and Graphics, Sunshine Coast. Retrieved November 11, 2009, from http://www.sibagraphics.com/colour.php
ColorJack: Sphere (Color Theory Visualizer). (n.d.). Color Theory @ ColorJack. Retrieved November 9, 2009, from http://www.colorjack.com/sphere/
Color Combinations | Color Schemes | Color Palettes. (n.d.). Color Combinations | Color Schemes | Color Palettes. Retrieved November 11, 2009, from http://www.colorcombos.com/
ColorSchemer Gallery | Website-ready color schemes for ColorSchemer. ColorSchemer | Instant Color Schemes. Retrieved November 11, 2009, from http://www.colorschemer.com/schemes/
Learning Activities
Activity 1: Discussion – HTML Elements
Project 1- Basic Website Tool Exploration
From your reading about website creation you should have a basic understanding of how HTML code works. This knowledge will help you understand how web creation software works.
Step 1: Try out your skills by creating a small web page file. Work through the tutorials for HTML and XHTML from the following W3C – World Wide Web Consortium websites:
o HTML brief tutorial - http://www.w3schools.com/html/DEFAULT.asp
o XHTML brief tutorial http://www.w3schools.com/Xhtml/xhtml_intro.asp
Step 2: Create a very basic hand-coded HTML page using a text document that incorporates the following elements:
· Colored background
· Text styles – bold, italic, underline, and color
· Link insertion
· Image insertion
· Overall page look
The expectation is that all students will be proficient and produce a beginning hand-coded website that contains the following based on the W3C tutorial information:
Assessment
See the HTML Elements Checklist for evaluation criteria.
Activity 2: Discussion 1 - Website Application Comparison
Step 1: Explore both a desktop application, like Dreamweaver, and a webware site creator, like Google Sites.
Step 2: Discuss the following with your colleagues. Respond to two or more of your colleagues’ postings.
· How does knowing basic code and being able to insert or tweak code extend the designer’s control in a site?
· Evaluate each tool type on the tool’s ability to allow users to make choices in text, color, layout, and design.
· Support why you would recommend each tool for both ease of use and its ability to allow code tweaking – hand code insertion.
· Recommend and support your reasoning for which tool you would recommend for 1) a primary school student website on insects and, 2) a high school computer science course.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Activity 3: Discussion – Website Elements
Project 2 Using Color, Typography, and Cascading Style Sheets (CSS)
Explore the philosophy behind website color choices, CSS, and typography in your reading and web sources. Apply your new knowledge by finding both low-quality examples and high-quality examples of color use, typography use, and CSS in different websites.
Step 1: Create a graphic organizer with a group of your fellow students (or individually as directed by your facilitator) to compare color and typography between exemplary and nonexemplary websites. Award-winning websites can be found at the Webby site (http://www.webbyawards.com/
), and subpar websites can found at sites like http://www.webpagesthatsuck.com
.
Step 2: Choose most recent worst case and best case award winners and create a chart that compares the elements of color and typography, as well as general audience appeal and communication value, for the four best and four worst sites of your choice.
Step 3: Post your chart to the Discussion Forum for this activity. Read and provide feedback to two or more of your colleagues or groups.
Assessment
Refer to the Website Elements Checklist for evaluation criteria.
Activity 4: Discussion 2 – Design Philosophies
Best and Worst Design Philosophies
Post your Project 2 graphic organizer on the Discussion Forum for this activity. Discuss the most important concepts you found while comparing these sites. What takeaway understanding have you gained that will guide the development of your own future website creation?
Read and provide feedback to two or more of your colleagues.
Assessment
Refer to the Discussion Checklist in the Course Resources folder for more information on how you will be evaluated.
Activity 5: Classroom Website
Begin Final Project - (due Learning Topic 8) As a final project for this course, you will develop a classroom website that incorporates all elements discussed during this course. Begin this week by choosing a website creation tool. In addition to Dreamweaver, KompoZer, and iWeb, you also can choose a webware application such as:
· Weebly - http://www.weebly.com/
· Google Sites - http://sites.google.com
· School Rack - http://www.schoolrack.com/register/teacher/
,
· Viviti - http://viviti.com/
· Webnode - http://www.webnode.com/
· Blinkweb - http://business.blinkweb.com/
· Doodlekit - http://www.doodlekit.com/home
· Yola - http://www.yola.com/
· Wix - http://www.wix.com/
· Webs - http://www.webs.com/
Looking Ahead – Activity 5 will help you begin the design of your education-based website for the classroom due in Learning Topic 8. Choose one website format, desktop application, or webware application to use as you begin to build a final project classroom website using the concepts learned in this course, and build on the concepts you learn in each Learning Topic. Instructions and Checklist are included in the Course Resources folder.
Future Learning Topics will discuss images and usability. These will also be incorporated into your classroom website.
Assessment
Refer to the Classroom Website Checklist for evaluation criteria.